<template>
  <div class="box">
    <header class="header">
      <van-search show-action placeholder="请输入搜索关键词">
        <template #left>
          <van-icon name="bars" size="22px" />
        </template>
        <template #action>
          <van-icon name="contact-o" size="22px" />
        </template>
      </van-search>
    </header>
    <div class="content">
      <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item v-for="image in images" :key="image">
          <img :src="image" style="width:100%;height:200px" />
        </van-swipe-item>
      </van-swipe>
      <van-grid>
  <van-grid-item icon="https://img12.360buyimg.com/babel/jfs/t20270715/38278/23/22574/7960/6694edb4F07db03e3/d663cd498321eadc.png" 
  text="京东超市" />
  <van-grid-item :icon="require('@/img/2.png')" text="京东电器" />
  <van-grid-item :icon="require('@/img/3.png')" text="服饰美妆" />
  <van-grid-item :icon="require('@/img/4.png')" text="充值中心" />
   
</van-grid>
<pro-list/>
    </div>

      
  </div>
</template>

<script setup>
import ProList from './components/ProList.vue'
 const images = [
      'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
      'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
     " https://img14.360buyimg.com/babel/s1180x940_jfs/t20270911/134725/34/46684/76762/66e1452dFe119aeb0/e2a9e2025ddf9a93.jpg.avif",
     require('@/img/1.jpg')

    ];
</script>
